<template>
  <el-card class="box-card">
    权限管理
    <hr>
    <br>
    <el-row style="display: flex;justify-content: flex-start;">
      <!--新增按钮-->
      <span style="display: inline-block;margin-left: 30px">
        <el-button type="primary" icon="el-icon-circle-plus-outline"
                   @click="addDialog" size="mini" v-has="'permission:add'"
                   round>新增
        </el-button>
      </span>
    </el-row>


    <br>
    <br>
    <!--表格数据及操作-->

    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      :tree-props="{children: 'childs'}">
      <!--索引-->
      <el-table-column type="index" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="permissionName" label="权限名" sortable>
      </el-table-column>
      <el-table-column prop="perms" label="权限标识" sortable>
      </el-table-column>
      <el-table-column prop="url" label="URl" sortable>
      </el-table-column>
      <el-table-column prop="pname" label="父级名称" sortable>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="dateForma">
      </el-table-column>
      <el-table-column prop="status" label="权限类型">

        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 0">目录</el-tag>
          <el-tag v-if="scope.row.status == 1">菜单</el-tag>
          <el-tag type="warning" v-if="scope.row.status == 2">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini"
                     v-has="'permission:upd'"
                     @click="editThis(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" icon="el-icon-delete"
                     v-has="'permission:del'"
                     size="mini" @click="removeThis(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加新权限" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="类型">
          <el-radio-group v-model="form.status" size="medium">
            <el-radio border label="0">目录</el-radio>
            <el-radio border label="1">菜单</el-radio>
            <el-radio border label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限名">
          <el-input v-model="form.permissionName" placeholder="请输入权限名"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" v-if="this.form.status==2">
          <el-input v-model="form.perms" placeholder="请输入权限标识"></el-input>
        </el-form-item>
        <el-form-item label="URL" v-if="this.form.status==2||this.form.status==1">
          <el-input v-model="form.url" placeholder="请输入URL"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-select v-model="form.pid" placeholder="请选择上级菜单">
            <el-option v-for="(menu,i) in menuList"
                       :key="i"
                       :label="menu.permissionName"
                       :value="menu.id">

            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNew">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="修改权限信息" :visible.sync="editdialog">
      <el-form :model="form">
        <el-form-item label="类型">
          <el-radio-group v-model="form.status" size="medium">
            <el-radio border label="0">目录</el-radio>
            <el-radio border label="1">菜单</el-radio>
            <el-radio border label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限名">
          <el-input v-model="form.permissionName" disabled placeholder="请输入权限名"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" v-if="this.form.status==2">
          <el-input v-model="form.perms" placeholder="请输入权限标识"></el-input>
        </el-form-item>
        <el-form-item label="URL" v-if="this.form.status==2||this.form.status==1">
          <el-input v-model="form.url" placeholder="请输入URL"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-select v-model="form.pid" placeholder="请选择上级菜单">
            <el-option v-for="(menu,i) in menuList"
                       :key="i"
                       :label="menu.permissionName"
                       :value="menu.id">

            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialog = false">取 消</el-button>
        <el-button type="primary" @click="updThis">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
  import moment from 'moment'

  export default {
    name: "permission",
    data() {
      return {
        tableData: [],   //表格数据
        menuListinit: [{id: 0, permissionName: "总公司"}],
        menuList: [],
        form: {
          permissionName: '',
          perms: '',
          url: '',
          pid: '',
          status: "",
          id: ""
        },
        dialogFormVisible: false,
        editdialog: false
      }
    },
    methods: {
      /**
       * 日期格式化
       * @param row
       * @param column
       * @returns {string}
       */
      dateForma(row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD")
      },
      /**
       * 表格索引
       * @param index
       * @returns {*}
       */
      indexMethod(index) {
        return index;
      },
      /**
       * 获取表格数据
       * @param keyword
       */
      getTableDate() {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/permission/listAllPermission',
          data: {}
        }).then((response) => {
          this.tableData = response.data.data;
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 添加新权限
       */
      addNew() {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/permission/addPermission',
          data: {
            permissionName: this.form.permissionName,
            pid: this.form.pid,
            status: this.form.status,
            url: this.form.url,
            perms: this.form.perms,
            createBy: window.localStorage.getItem("uId")
          }
        }).then((response) => {
          if (response.data.msg == "添加成功！") {
            this.$message.success(response.data.msg);
            this.clearValue();
            this.getAllMenu();
            this.dialogFormVisible = false;
            this.getTableDate();
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 删除当前权限
       * @param row
       */
      removeThis(row) {
        this.$axios({
          method: 'delete',
          url: 'http://127.0.0.1:8080/permission/delPermission?id=' + row.id,
        }).then((response) => {
          if (response.data.msg == "删除成功！") {
            this.getAllMenu();
            this.$message.success(response.data.msg);
            this.getTableDate(this.pageSize, this.current);
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 打开添加弹出层
       */
      addDialog() {
        this.clearValue()
        this.dialogFormVisible = true;
        this.menuListinit = [{id: 0, permissionName: "总公司"}];
      },
      /**
       * 打开编辑弹出层
       * @param row
       */
      editThis(row) {
        this.clearValue()
        this.form.id = row.id;
        this.editdialog = true;
        this.form.permissionName = row.permissionName;
        this.form.status = row.status;
        this.form.pid = row.pid;
        this.form.perms = row.perms;
        this.form.url = row.url;
      },
      /**
       * 更新当前权限
       */
      updThis() {
        this.$axios({
          method: 'put',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/permission/updPermission',
          data: {
            id: this.form.id,
            status: this.form.status,
            pid: this.form.pid,
            perms: this.form.perms,
            permissionName: this.form.permissionName,
            url: this.form.url,
            updateBy: window.localStorage.getItem("uId")
          }
        }).then((response) => {
          if (response.data.msg == "更新成功！") {
            this.$message.success(response.data.msg);
            this.clearValue()
            this.editdialog = false;
            this.getTableDate();
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      /**
       * 清空弹层值
       */
      clearValue() {
        Object.keys(this.form).forEach((key) => (this.form[key] = ''))
      },
      /**
       * 获取菜单列表
       */
      getAllMenu() {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/permission/listAllMenu',
        }).then((response) => {
          this.menuList = this.menuListinit;
          for (var i = 0; i < response.data.data.length; i++) {
            this.menuList.push(response.data.data[i]);
          }
          // console.log(this.menuList);
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    created() {
      /**
       * 页面渲染调用一次获取表格
       */
      this.getTableDate();
      this.getAllMenu();
    }
  }
</script>

